<template>
  <div>
    <h2>AllClassify</h2>
    <div class="itemList">
        <Item v-for="item in itemList" :key="item.id" v-bind="item">
          <template v-slot:default="{content}">
            <ul>
              <li v-for="item in content" :key="item">{{item}}</li>
            </ul>
          </template>
        </Item>
    </div>
  </div>
</template>

<script>
import Item from "@/components/Item";
export default {
  components: {Item},

  data(){
      return{
        itemList:[
          {id:"001",content:["cs","pubg","lol"],title:"game"},
          {id:"002",content:["baby","play","end"],title:"music"},
          {id:"003",content:["教父","功夫","战狼"],title:"movie"},
        ]
      }
    }
}
</script>


<style scoped>
h2{
  margin-left: 100px;
}
.itemList{
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin: auto;
}
</style>